<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <title>博客数据统计</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <!-- 引入Apache ECharts用于图表展示 -->
    <script src="../../static/lib/echarts/echarts.min.js" th:src="@{/lib/echarts/echarts.min.js}"></script>
</head>
<body>

<!-- 导航 -->
<nav th:replace="admin/_fragments :: menu(5)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
</nav>

<!-- 中间内容 -->
<div class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <div class="ui success large message">
            <h3>博客统计概览</h3>
            <div class="ui three statistics">
                <div class="statistic">
                    <div class="value" th:text="${overall.blogCount}">0</div>
                    <div class="label">博客数量</div>
                </div>
                <div class="statistic">
                    <div class="value" th:text="${overall.commentCount}">0</div>
                    <div class="label">评论数量</div>
                </div>
                <div class="statistic">
                    <div class="value" th:text="${overall.totalViews}">0</div>
                    <div class="label">总访问量</div>
                </div>
            </div>
        </div>

        <div class="ui segments">
            <!-- 博客发布趋势 -->
            <div class="ui segment">
                <h3 class="ui dividing header">博客发布趋势</h3>
                <div id="trendChart" style="height: 300px;"></div>
            </div>

            <!-- 分类统计 -->
            <div class="ui segment">
                <h3 class="ui dividing header">分类统计</h3>
                <div id="typeChart" style="height: 300px;"></div>
            </div>

            <!-- 标签统计 -->
            <div class="ui segment">
                <h3 class="ui dividing header">标签统计</h3>
                <div id="tagChart" style="height: 300px;"></div>
            </div>
        </div>

        <div class="ui segments">
            <!-- 访问量最高的博客 -->
            <div class="ui segment">
                <h3 class="ui dividing header">访问量最高的博客</h3>
                <table class="ui celled table">
                    <thead>
                    <tr>
                        <th>标题</th>
                        <th>访问量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="blog : ${topViewedBlogs}">
                        <td th:text="${blog.title}">博客标题</td>
                        <td th:text="${blog.views}">0</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 评论最多的博客 -->
            <div class="ui segment">
                <h3 class="ui dividing header">评论最多的博客</h3>
                <table class="ui celled table">
                    <thead>
                    <tr>
                        <th>标题</th>
                        <th>评论数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="blog : ${mostCommentedBlogs}">
                        <td th:text="${blog.title}">博客标题</td>
                        <td th:text="${blog.commentCount}">0</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 底部footer -->
<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
</footer>

<th:block th:replace="admin/_fragments :: script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</th:block>

<script th:inline="javascript">
    // 获取后端传递的数据
    var blogTrend = /*[[${blogTrend}]]*/ [];
    var typeStats = /*[[${typeStats}]]*/ [];
    var tagStats = /*[[${tagStats}]]*/ [];

    // 初始化ECharts实例
    var trendChart = echarts.init(document.getElementById('trendChart'));
    var typeChart = echarts.init(document.getElementById('typeChart'));
    var tagChart = echarts.init(document.getElementById('tagChart'));

    // 博客发布趋势图表配置
    var trendOption = {
        title: {
            text: '博客发布趋势',
            left: 'center',
            textStyle: {
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: blogTrend.map(item => item.month),
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            minInterval: 1
        },
        series: [{
            name: '博客数量',
            type: 'line',
            data: blogTrend.map(item => item.count),
            smooth: true,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            lineStyle: {
                width: 3,
                shadowColor: 'rgba(0,0,0,0.3)',
                shadowBlur: 10,
                shadowOffsetY: 8
            },
            itemStyle: {
                color: '#6777ef'
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(103, 119, 239, 0.8)'
                }, {
                    offset: 1,
                    color: 'rgba(103, 119, 239, 0.1)'
                }])
            }
        }]
    };

    // 分类统计图表配置
    var typeOption = {
        title: {
            text: '分类统计',
            left: 'center',
            textStyle: {
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: typeStats.map(item => item.typeName)
        },
        series: [{
            name: '分类',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: typeStats.map(item => ({
                value: item.count,
                name: item.typeName
            }))
        }]
    };

    // 标签统计图表配置
    var tagOption = {
        title: {
            text: '标签统计',
            left: 'center',
            textStyle: {
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: tagStats.map(item => item.tagName),
            axisLabel: {
                interval: 0,
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            minInterval: 1
        },
        series: [{
            name: '博客数量',
            type: 'bar',
            data: tagStats.map(item => item.count),
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(55, 162, 255, 1)'
                }, {
                    offset: 1,
                    color: 'rgba(116, 21, 219, 1)'
                }]),
                borderRadius: [5, 5, 0, 0]
            }
        }]
    };

    // 使用配置项显示图表
    trendChart.setOption(trendOption);
    typeChart.setOption(typeOption);
    tagChart.setOption(tagOption);

    // 响应式调整图表大小
    window.addEventListener('resize', function() {
        trendChart.resize();
        typeChart.resize();
        tagChart.resize();
    });
</script>

</body>
</html>